<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- 子组件中只有一个根元素，所以直接在使用子组件的位置，直接填写我们想要的属性即可 -->
        <!-- 这里可以使用v-model的原因：子组件中监听父组件的事件中，传递的是input事件类型，如果填写的是其他事件类型，将会毫无效果 -->
        <!-- 注意点：为子组件赋值优先赋值给子组件的props属性，如果没有props属性，那么就会添加到组件的根元素上 -->
        <!-- v-model：双向数据绑定：数据影响元素 + 元素影响数据 -->
        <!-- 1、为子组件的value属性赋值  2、监听子组件所发出的input事件 -->
        <myinput
          v-model="user.username"
          placeholder="请输入手机号码"
          :rules="/^1[3456789]\d{9}|^admin$$/"
          msg="请输入11位手机号码"
        ></myinput>
        <myinput
          v-model="user.password"
          placeholder="请输入密码"
          type="password"
          :rules="/^.{3,16}$/"
          msg="请输入3~16位的密码"
        ></myinput>
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
      <mybutton type="danger" @click="login">登录</mybutton>
    </div>
  </div>
</template>

<script>
import mybutton from "@/components/mybutton.vue";
import myinput from "@/components/myinput.vue";
import { userlogin } from "@/apis/user";
export default {
  components: {
    mybutton,
    myinput,
  },
  methods: {
    login(e) {
      // 条件成立就发送请求
      if (
        /^1[3456789]\d{9}$|^admin$/.test(this.user.username) &&
        /^.{3,16}$/.test(this.user.password)
      ) {
        userlogin(this.user)
          .then((res) => {
            console.log(res);
            if (res.data.message == "登录成功") {
              // 存储token值，后续进行导航守卫操作
              localStorage.setItem("mytoken", res.data.data.token);
              localStorage.setItem("userId", res.data.data.user.id);
              // 轻提示登录成功
              this.$toast.success("登录成功");

              // 获取用户在未登录前所在的地址：通过拦截器添加了一个redirect_url参数，后面接的是登录前的地址，使用数组的split，根据=来划分地址
              let redirect = location.href.split("=")[1];
              console.log(redirect);
              // 如果有这个参数，就执行这个操作
              if (redirect) {
                // 使用解码api：优化地址
                // 把之前的地址变成跳转后的地址
                location.href = decodeURIComponent(redirect);
              } else {
                this.$router.push({
                  path: `/personal/${res.data.data.user.id}`,
                });
              }
              // 跳转的时候，获取用户详情需要用到id值，所以需要路由需要戴上id值，在请求返回后的数据中可以获得id值
            } else {
              this.$toast.fail("登录失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$toast.fail("手机号码或者密码出错！");
      }
    },
  },
  data() {
    return {
      user: {
        username: "19868380412",
        password: "123456",
      },
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}
.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}
.inputs {
  input {
    margin-bottom: 20px;
  }
}
.tips {
  text-align: right;
  margin-bottom: 20px;
  a {
    color: #3385ff;
  }
}
</style>